<script>
import WordCard from './components/WordCard.vue'
import wordService from './api/wordService'

export default {
  name: 'App',
  components: {
    WordCard
  },
  data() {
    return {
      currentWordIndex: 0,
      words: [
          {
            text: 'Apple',
            phonetic: '/ˈæpl/',
            difficulty: 2,
            meaning: '苹果',
            type: '名词',
            example: 'An apple a day keeps the doctor away.',
            exampleTranslation: '一天一苹果，医生远离我。',
            exampleAudioUrl: '',
            imageUrl: new URL('./assets/Apple/imageUrl.png', import.meta.url).href,
            animationUrl: new URL('./assets/Apple/animationUrl.png', import.meta.url).href,
            audioUrl: new URL('./assets/Apple/audioUrl.txt', import.meta.url).href,
            explanation: 'Apple是一种常见的水果，外表呈圆形，有红色、绿色或黄色品种。苹果富含维生素和纤维素，被认为是健康的零食选择。',
            tags: ['水果', '食物', '健康', '日常']
          },
          {
            text: 'Book',
            phonetic: '/bʊk/',
            difficulty: 3,
            meaning: '书',
            type: '名词',
            example: 'I love reading books in my free time.',
            exampleTranslation: '我喜欢在空闲时间阅读书籍。',
            exampleAudioUrl: '',
            imageUrl: new URL('./assets/Book/imageUrl.png', import.meta.url).href,
            animationUrl: new URL('./assets/Book/animationUrl.png', import.meta.url).href,
            audioUrl: new URL('./assets/Book/audioUrl.png', import.meta.url).href,
            explanation: 'Book是一种由纸张和文字组成的物品，可以包含故事、信息或知识。书籍是人类传递知识和文化的重要媒介，有纸质和电子两种主要形式。',
            tags: ['学习', '娱乐', '文化', '知识']
          },
          {
            text: 'Cat',
            phonetic: '/kæt/',
            difficulty: 1,
            meaning: '猫',
            type: '名词',
            example: 'The cat is sleeping on the sofa.',
            exampleTranslation: '猫在沙发上睡觉。',
            exampleAudioUrl: '',
            imageUrl: new URL('./assets/Cat/imageUrl.png', import.meta.url).href,
            animationUrl: new URL('./assets/Cat/animationUrl.png', import.meta.url).href,
            audioUrl: new URL('./assets/Cat/audioUrl.png', import.meta.url).href,
            explanation: 'Cat是一种常见的家养宠物，属于猫科动物，通常体型较小，被毛柔软，有各种颜色。猫以其优雅的姿态和独立的性格而闻名，是世界上最受欢迎的宠物之一。',
            tags: ['动物', '宠物', '哺乳动物', '家庭']
          }],
      isLoading: true
    }
  },
  computed: {
    currentWord() {
      return this.words.length > 0 ? this.words[this.currentWordIndex] : null;
    }
  },
  methods: {
    nextWord() {
      // 切换到下一个单词
      this.currentWordIndex = (this.currentWordIndex + 1) % this.words.length;
    },
    prevWord() {
      // 切换到上一个单词
      this.currentWordIndex = (this.currentWordIndex - 1 + this.words.length) % this.words.length;
    },
    fetchWords() {
      try {
        this.isLoading = true;
        wordService.getDailyWords(10).then((response) => {
          this.words = response.data;
          this.isLoading = false;
        });
      } catch (error) {
        console.error('获取单词数据失败:', error);
        // 如果API请求失败，使用默认数据
        this.words = [
          {
            text: 'Apple',
            phonetic: '/ˈæpl/',
            difficulty: 2,
            meaning: '苹果',
            type: '名词',
            example: 'An apple a day keeps the doctor away.',
            exampleTranslation: '一天一苹果，医生远离我。',
            exampleAudioUrl: '',
            imageUrl: new URL('./assets/Apple/imageUrl.png', import.meta.url).href,
            animationUrl: new URL('./assets/Apple/animationUrl.png', import.meta.url).href,
            audioUrl: new URL('./assets/Apple/audioUrl.txt', import.meta.url).href,
            explanation: 'Apple是一种常见的水果，外表呈圆形，有红色、绿色或黄色品种。苹果富含维生素和纤维素，被认为是健康的零食选择。',
            tags: ['水果', '食物', '健康', '日常']
          },
          {
            text: 'Book',
            phonetic: '/bʊk/',
            difficulty: 3,
            meaning: '书',
            type: '名词',
            example: 'I love reading books in my free time.',
            exampleTranslation: '我喜欢在空闲时间阅读书籍。',
            exampleAudioUrl: '',
            imageUrl: new URL('./assets/Book/imageUrl.png', import.meta.url).href,
            animationUrl: new URL('./assets/Book/animationUrl.png', import.meta.url).href,
            audioUrl: new URL('./assets/Book/audioUrl.png', import.meta.url).href,
            explanation: 'Book是一种由纸张和文字组成的物品，可以包含故事、信息或知识。书籍是人类传递知识和文化的重要媒介，有纸质和电子两种主要形式。',
            tags: ['学习', '娱乐', '文化', '知识']
          },
          {
            text: 'Cat',
            phonetic: '/kæt/',
            difficulty: 1,
            meaning: '猫',
            type: '名词',
            example: 'The cat is sleeping on the sofa.',
            exampleTranslation: '猫在沙发上睡觉。',
            exampleAudioUrl: '',
            imageUrl: new URL('./assets/Cat/imageUrl.png', import.meta.url).href,
            animationUrl: new URL('./assets/Cat/animationUrl.png', import.meta.url).href,
            audioUrl: new URL('./assets/Cat/audioUrl.png', import.meta.url).href,
            explanation: 'Cat是一种常见的家养宠物，属于猫科动物，通常体型较小，被毛柔软，有各种颜色。猫以其优雅的姿态和独立的性格而闻名，是世界上最受欢迎的宠物之一。',
            tags: ['动物', '宠物', '哺乳动物', '家庭']
          }
        ];
        this.isLoading = false;
      }
    }
  },
  created() {
    // 在组件创建时获取单词数据
    this.fetchWords();
  }
}
</script>

<template>
  <div class="fullscreen-app">
    <main class="fullscreen-main">
      <word-card :word="currentWord" ref="wordCard" @nextWord="nextWord" @prevWord="prevWord" />
    </main>
  </div>
</template>

<style>
@import 'bootstrap/dist/css/bootstrap.min.css';
@import 'bootstrap-icons/font/bootstrap-icons.css';

/* 设置根元素和body为100%高度 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 应用全屏设置 */
.fullscreen-app {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.fullscreen-main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  /* 添加相对定位以支持子元素的绝对定位 */
}

/* 移动端优化 */
@media (max-width: 768px) {
  .fullscreen-main {
    padding: 0;
  }
}

/* 保留部分原有样式 */
h1 {
  text-align: center;
  margin-bottom: 2rem;
  color: #2c3e50;
}
</style>
